<template>
  <div>
    <video ref="videoPlayer" :src="videoUrl" controls>
      <track :src="sv" kind="subtitles" label="中文字幕" srclang="zh" default>
<!--      <track :src="sv">-->
    </video>
    <div class='base'>
      <div class='cube'></div>
      <div class='cube'></div>
      <div class='cube'></div>
      <div class='cube'></div>
      <div class='cube'></div>
      <div class='cube'></div>
      <div class='cube'></div>
      <div class='cube'></div>
      <div class='cube'></div>
    </div>

  </div>
</template>

<script>
// import { convertAssToVtt } from 'ass-to-vtt';
// import assSubtitle from '../../../../../assets/AiViode/subtitles.ass';
import libjass from 'libjass';
import Talk from "@/components/Users/Talk";
export default {
  components: {Talk},
  data() {
    return {
      subtitleUrl: 'https://andysama.work:8089/files/b07d639b733746b48a31fb90a722288e.ass',
      videoUrl: "https://andysama.work:8089/files/104054890204443b8d2f9720e8a6c581.webm",
      sv: require("../../../../../assets/AiViode/httpvtt.vtt")
    };
  },
  mounted() {

    // const videoPlayer = this.$refs.videoPlayer;
    // const subtitleContainer = this.$refs.subtitleContainer;
    //
    // const videoUrl = this.videoUrl; // 替换为实际的视频文件的 URL
    // const subtitleUrl = this.subtitleUrl; // 替换为实际的字幕文件的 URL
    //
    // videoPlayer.src = videoUrl; // Set the URL of the video file

    // fetch(subtitleUrl)
    //     .then((response) => response.text())
    //     .then((subtitleData) => {
    //       const renderer = new libjass.Renderer(subtitleContainer); // Create a subtitle renderer and specify the container element
    //       renderer.init(subtitleData); // Initialize the subtitle renderer and load the ASS subtitle data
    //       renderer.attachTo(videoPlayer); // Attach the subtitle renderer to the video element
    //     })
    //     .catch((error) => {
    //       console.error('Failed to load or render subtitles:', error);
    //     });
  },
  beforeDestroy() {
    // 销毁播放器实例
    if (this.videoPlayer) {
      this.videoPlayer.dispose();
    }
  }
};
</script>

<style scoped>
/* 样式表 */
</style>
